import { PageComponent, html, reactive } from 'nvagir'
import marked from 'marked'
import './WriteArticle.less'

import switchUrl from '../../assets/switch.png'
import personUrl from '../../assets/person.png'
import MainSideBar from '../../components/MainSideBar/MainSideBar'

/**
 * Use marked.js
 * basic settings
 */
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  //tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
})

/**
 * @template Data save Article
 */
type Data = {
  text: string
  convert: string
  title: string
}

/**
 *
 * @returns
 */
const WriteArticle: PageComponent = () => {
  /**
   * Used to initialize the template
   * @param data initialize the incoming parameters
   */
  const data: Data = {
    text:
      `hello world\n*hello world*\n**hello world**\n# hello world\n` +
      '``hello world``\n',
    convert: '',
    title: '',
  }

  /**
   * set text in Bold face
   */
  const deeply = () => {
    let start = doms.content.selectionStart
    let end = doms.content.selectionEnd
    data.text =
      data.text.slice(0, start) +
      '**' +
      data.text.slice(start, end) +
      '**' +
      data.text.slice(end, data.text.length)
    doms.content.value = data.text
    proxyData.text = data.text
  }

  /**
   * set text in Italic
   */
  const tilt = () => {
    let start = doms.content.selectionStart
    let end = doms.content.selectionEnd
    data.text =
      data.text.slice(0, start) +
      '*' +
      data.text.slice(start, end) +
      '*' +
      data.text.slice(end, data.text.length)
    doms.content.value = data.text
    proxyData.text = data.text
  }

  /**
   * set text as heading
   */
  const head = () => {
    let start = doms.content.selectionStart!
    let end = doms.content.selectionEnd!
    data.text =
      data.text.slice(0, start) +
      '\n# ' +
      data.text.slice(start, end) +
      '' +
      data.text.slice(end, data.text.length)
    doms.content.value = data.text
    proxyData.text = data.text
  }

  /**
   * give paragraph an underline
   */
  const underline = () => {
    let start = doms.content.selectionStart!
    let end = doms.content.selectionEnd!
    data.text =
      data.text.slice(0, start) +
      '\n---' +
      data.text.slice(start, end) +
      '' +
      data.text.slice(end, data.text.length)
    doms.content.value = data.text
    proxyData.text = data.text
  }

  /**
   * make text smaller
   */
  const shrink = () => {
    let start = doms.content.selectionStart!
    let end = doms.content.selectionEnd!
    data.text =
      data.text.slice(0, start) +
      '``' +
      data.text.slice(start, end) +
      '``' +
      data.text.slice(end, data.text.length)
    doms.content.value = data.text
    proxyData.text = data.text
  }

  /**
   * input box messages transfer to show box
   */
  const copy = () => {
    data.text = doms.content.value
    //console.log(data.text)
    proxyData.text = data.text
    data.convert = marked(proxyData.text)
    doms.showcontent.innerHTML = proxyData.convert
  }

  /**
   * Creating a segment within block quote
   */
  const block = () => {
    let text = doms.content
    let str = text.value
    text.value = str + '\n\n' + '> '
    text.title = '块引用内分段'
    setCaretPosition(text, str.length + 4)
  }

  /**
   * Creating a ordered list
   */
  let num = 0
  const OL = () => {
    let text = doms.content
    let str = text.value
    text.value = str + '\n' + ++num + ') '
    setCaretPosition(text, str.length + 5)
  }

  /**
   * Creating an unordered list
   */
  const UL = () => {
    let text = doms.content
    let str = text.value
    text.value = str + '\n' + '* '
    setCaretPosition(text, str.length + 3)
  }

  /**
   * Creating a Code box
   */
  const code = () => {
    let text = doms.content
    let str = text.value
    text.value = str + '\n' + '```' + '\n\n' + '```'
    setCaretPosition(text, str.length + 5)
  }

  /**
   * setting Article Title
   * @param ele Current input element
   */
  const headTitle = (ele: any) => {
    let text = ele
    let str = text.value
    doms.content.value = '# ' + str + '\n\n' + doms.content.value + '\n'
    setCaretPosition(doms.content.value, 2)
  }

  /**
   * send HTML form and jump to next pages
   */
  const sendHtml = () => {
    console.log(data.convert)
    //let send = data.convert
    history.nvagirRouter.push('/article')
  }

  /**
   * WriteArticle page layout and Internal data transfer
   * @template content Render input window
   * @template showcontent Render show window
   */
  const { el, doms } = html<{
    content: HTMLTextAreaElement
    showcontent: HTMLDivElement
  }>`
    <div class="write-article-page">
      ${MainSideBar()}
      <div class="top-bar">
        <div class="article-title-left">
          <input
            type="text"
            placeholder="输入文章标题..."
            style="border: none;"
            n@blur=${ev => headTitle(ev.target! as HTMLInputElement)}
          />
        </div>
        <div class="top-right">
          <p class="state">保存成功</p>
          <button class="draft-box">草稿箱</button>
          <button class="release" n@click=${sendHtml}>发布</button>
          <img src="${switchUrl}" alt="switch" class="switch" />
          <img src="${personUrl}" alt="switch" class="personal-image" />
        </div>
      </div>
      <div class="whole-article">
        <div class="tools-part">
          <div class="writing-tools">
            <button class="tool button" n@click=${deeply}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="icon"
              >
                <path
                  d="M13.35,17.401l-4.201,0l0,-3.601l4.201,0c0.997,0 1.801,0.805 1.801,1.801c0,0.996 -0.804,1.8 -1.801,1.8m-4.201,-10.802l3.601,0c0.996,0 1.801,0.804 1.801,1.8c0,0.996 -0.805,1.801 -1.801,1.801l-3.601,0m6.722,1.548c1.164,-0.816 1.98,-2.149 1.98,-3.349c0,-2.712 -2.1,-4.801 -4.801,-4.801l-7.502,0l0,16.804l8.45,0c2.521,0 4.454,-2.04 4.454,-4.549c0,-1.825 -1.033,-3.385 -2.581,-4.105Z"
                  style="fill-rule: nonzero;"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${tilt}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="icon"
              >
                <path
                  d="M8.617,3.658l0,3.575l2.633,0l-2.075,9.534l-3.325,0l0,3.575l9.533,0l0,-3.575l-2.633,0l2.075,-9.534l3.325,0l0,-3.575l-9.533,0Z"
                  style="fill-rule: nonzero;"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${head}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="icon"
              >
                <path
                  d="M2.007,12.526l3.156,0l0,7.363l3.155,0l0,-7.363l3.156,0l0,-3.156l-9.467,0m6.311,-5.259l0,3.155l5.26,0l0,12.623l3.156,0l0,-12.623l5.259,0l0,-3.155l-13.675,0Z"
                  style="fill-rule: nonzero;"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${underline}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="icon"
              >
                <path
                  d="M40, 10 L5,10 L5,14 L40 14, Z"
                  style="fill-rule: nonzero;"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${shrink}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                class="icon"
              >
                <path
                  d="M2.007,12.526l3.156,0l0,7.363l3.155,0l0,-7.363l3.156,0l0,-3.156l-9.467,0m6.311,-5.259l0,"
                  style="fill-rule: nonzero;"
                ></path>
              </svg>
            </button>

            <button class="tool button" n@click=${block}>
              <svg
                t="1629097302140"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8187"
                width="64"
                height="64"
              >
                <path
                  d="M383.488 277.376a43.968 43.968 0 0 1-18.24 59.52 235.392 235.392 0 0 0-118.4 152 150.016 150.016 0 1 1-46.528 223.552l-8.512-11.968-2.176-3.84a149.504 149.504 0 0 1-7.744-14.976l-3.2-7.808a324.096 324.096 0 0 1 145.28-414.72 43.968 43.968 0 0 1 59.52 18.24z m402.944 0a43.968 43.968 0 0 1-18.176 59.52 235.392 235.392 0 0 0-118.4 152 150.016 150.016 0 1 1-46.72 223.36l-8.384-11.904-2.112-3.712a149.504 149.504 0 0 1-7.936-15.36l-3.264-8a324.032 324.032 0 0 1 145.536-414.08 43.968 43.968 0 0 1 59.52 18.176z"
                  p-id="8188"
                  fill="#515151"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${OL}>
              <svg
                t="1629097330535"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9103"
                width="64"
                height="64"
              >
                <path
                  d="M160.2 560.9h48c13.9 0 20.9 5.9 20.9 17.8 0 11.1-6.3 17.1-18.8 17.8h-89.8c-13.2 0-19.8-5.9-19.8-17.8 0-4.2 1.7-8.7 5.2-13.6 3.5-4.2 9-10.4 16.7-18.8 23-25.1 39.7-45.2 50.1-60.6 6.3-9 9.4-17.4 9.4-25.1-1.4-12.5-7.7-19.5-18.8-20.9-11.1 0-19.2 7.7-24 23-4.2 13.2-10.1 19.8-17.7 19.8-12.5-0.7-19.2-6.9-19.8-18.8 4.2-36.2 25.1-56.4 62.6-60.6 37.6 2.1 57.4 20.5 59.5 55.3 0 18.8-15.7 46.3-47 82.5-7.7 9.2-13.2 15.8-16.7 20zM162.5 692.4c35.1 2.2 54.9 19 59.2 50.6 0 17.9-7.5 31.9-22.6 42 21.5 10.8 32.6 26.9 33.4 48.4-3.6 36.6-26.5 56.3-68.9 59.2-38.7-2.2-61-18.6-66.7-49.5 1.4-10.8 8.6-16.8 21.5-18.3 5 0 10.4 4.3 16.1 12.9 7.9 12.9 17.6 19.4 29 19.4 15.8-1.4 24.4-10 25.8-25.8 0-13.6-8.3-21.5-24.7-23.7-14.4-2.9-21.5-9.3-21.5-19.4 0-9.3 6.5-15.8 19.4-19.4 12.9-2.9 19.4-9.7 19.4-20.4-0.7-11.5-7.2-17.6-19.4-18.3-10 0-18.3 5-24.7 15.1-5.7 7.9-11.5 11.8-17.2 11.8-10.8-0.7-16.5-7.5-17.2-20.4 4.9-25.9 24.7-40.6 59.1-44.2zM153.1 305.9V166.1h-16.3c-12.3-0.7-18.8-7.2-19.5-19.5 0.7-11.5 7.2-17.7 19.5-18.4h39c11.5 0.7 17.7 7.2 18.4 19.5v158.2c-0.7 13-7.6 19.5-20.6 19.5-12.9 0-19.8-6.5-20.5-19.5zM889.4 258.2h-582c-18.5 0-33.6-15.1-33.6-33.6s15.1-33.6 33.6-33.6h582c18.5 0 33.6 15.1 33.6 33.6s-15.1 33.6-33.6 33.6zM827.1 544.7H314.7c-18.5 0-33.6-15.1-33.6-33.6s15.1-33.6 33.6-33.6h512.4c18.5 0 33.6 15.1 33.6 33.6s-15.2 33.6-33.6 33.6zM889.4 821.6h-582c-18.5 0-33.6-15.1-33.6-33.6s15.1-33.6 33.6-33.6h582c18.5 0 33.6 15.1 33.6 33.6s-15.1 33.6-33.6 33.6z"
                  fill="#515151"
                  p-id="9104"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${UL}>
              <svg
                t="1629097393389"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="12142"
                width="64"
                height="64"
              >
                <path
                  d="M186.5216 768a25.6 25.6 0 0 1 25.6 25.6v51.2a25.6 25.6 0 0 1-25.6 25.6h-51.2a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6h51.2zM896 768a25.6 25.6 0 0 1 25.6 25.6v42.4448a25.6 25.6 0 0 1-25.6 25.6H362.0352a25.6 25.6 0 0 1-25.6-25.6V793.6a25.6 25.6 0 0 1 25.6-25.6H896zM186.5216 460.8a25.6 25.6 0 0 1 25.6 25.6v51.2a25.6 25.6 0 0 1-25.6 25.6h-51.2a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6h51.2zM896 460.8a25.6 25.6 0 0 1 25.6 25.6v42.4448a25.6 25.6 0 0 1-25.6 25.6H362.0352a25.6 25.6 0 0 1-25.6-25.6V486.4a25.6 25.6 0 0 1 25.6-25.6H896z m-716.8-307.2a25.6 25.6 0 0 1 25.6 25.6v51.2a25.6 25.6 0 0 1-25.6 25.6h-51.2a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6h51.2z m716.8 0a25.6 25.6 0 0 1 25.6 25.6v42.4448a25.6 25.6 0 0 1-25.6 25.6H362.0352a25.6 25.6 0 0 1-25.6-25.6V179.2a25.6 25.6 0 0 1 25.6-25.6H896z"
                  p-id="12143"
                  fill="#515151"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${code}>
              <svg
                t="1629097084222"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7900"
                width="64"
                height="64"
              >
                <path
                  d="M320 294.4c-17.066667-17.066667-46.933333-17.066667-64 4.266667l-179.2 183.466666c-17.066667 17.066667-17.066667 46.933333 0 64L256 729.6c8.533333 8.533333 21.333333 12.8 34.133333 12.8 12.8 0 21.333333-4.266667 29.866667-12.8 17.066667-17.066667 17.066667-46.933333 0-64L170.666667 512l149.333333-153.6c17.066667-17.066667 17.066667-46.933333 0-64zM951.466667 482.133333L772.266667 298.666667c-17.066667-17.066667-46.933333-17.066667-64 0s-17.066667 46.933333 0 64l149.333333 153.6-149.333333 153.6c-17.066667 17.066667-17.066667 46.933333 0 64 8.533333 8.533333 21.333333 12.8 29.866666 12.8 12.8 0 21.333333-4.266667 34.133334-12.8l179.2-183.466667c17.066667-21.333333 17.066667-51.2 0-68.266667zM614.4 106.666667c-25.6-4.266667-46.933333 8.533333-55.466667 34.133333l-179.2 725.333333c-4.266667 25.6 8.533333 46.933333 34.133334 55.466667h12.8c21.333333 0 38.4-12.8 42.666666-34.133333l179.2-725.333334c4.266667-25.6-8.533333-46.933333-34.133333-55.466666z"
                  p-id="7901"
                  fill="#515151"
                ></path>
              </svg>
            </button>
          </div>
          <div class="more-tools">
            <button class="tool button" n@click=${'help'}>
              <svg
                t="1629101838102"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="17682"
                width="64"
                height="64"
              >
                <path
                  d="M512 757m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z"
                  p-id="17683"
                  fill="#515151"
                ></path>
                <path
                  d="M512 0C229.032 0 0 228.994 0 512c0 282.968 228.994 512 512 512 282.968 0 512-228.994 512-512C1024 229.032 795.006 0 512 0z m0 944c-238.754 0-432-193.214-432-432 0-238.754 193.214-432 432-432 238.754 0 432 193.214 432 432 0 238.754-193.214 432-432 432z"
                  p-id="17684"
                  fill="#515151"
                ></path>
                <path
                  d="M512 257c-88.224 0-160 71.776-160 160 0 22.092 17.908 40 40 40s40-17.908 40-40c0-44.112 35.888-80 80-80s80 35.888 80 80-35.888 80-80 80c-22.092 0-40 17.908-40 40v100c0 22.092 17.908 40 40 40s40-17.908 40-40v-65.062c68.932-17.806 120-80.52 120-154.938 0-88.224-71.776-160-160-160z"
                  p-id="17685"
                  fill="#515151"
                ></path>
              </svg>
            </button>

            <button class="tool button" n@click=${'see'}>
              <svg
                t="1629103093679"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="18624"
                width="64"
                height="64"
              >
                <path
                  d="M688 288a48.048 48.048 0 0 1 48 48v464h96V336a144.16 144.16 0 0 0-144-144H224v96zM688 928H144a48.048 48.048 0 0 1-48-48V336a47.92 47.92 0 0 1 32-45.04v-98.016A144.16 144.16 0 0 0 0 336v544a144.16 144.16 0 0 0 144 144h544a144.16 144.16 0 0 0 143.04-128h-98A47.92 47.92 0 0 1 688 928z"
                  p-id="18625"
                  fill="#515151"
                ></path>
                <path
                  d="M880 0H272a144.16 144.16 0 0 0-144 144v48.96A144.288 144.288 0 0 1 144 192h80V144a48.048 48.048 0 0 1 48-48h608a48.048 48.048 0 0 1 48 48v608a48.048 48.048 0 0 1-48 48h-48v80a144.48 144.48 0 0 1-0.96 16H880a144.16 144.16 0 0 0 144-144V144a144.16 144.16 0 0 0-144-144z"
                  p-id="18626"
                  fill="#515151"
                ></path>
                <path
                  d="M144 288h80v-96H144a144.288 144.288 0 0 0-16 0.96v98A47.44 47.44 0 0 1 144 288zM832 800h-96v80a47.456 47.456 0 0 1-2.96 16h98.016A144.48 144.48 0 0 0 832 880z"
                  p-id="18627"
                  fill="#515151"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${'wholeScreen'}>
              <svg
                t="1629101701771"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="16316"
                width="64"
                height="64"
              >
                <path
                  d="M780.9 208.4H577.5c-18.6 0-33.8 14.9-34.2 33.5-0.4 19.3 15.6 34.8 34.8 34.8h121.8L577.5 399.2c-13.3 13.3-13.3 35 0 48.3s35 13.3 48.3 0L747.3 326v122.4c0 18.6 15 33.8 33.5 34.2 19.2 0.4 34.8-15.6 34.8-34.8V243.1c0-19.1-15.5-34.7-34.7-34.7zM445.8 747.3H324l122.6-122.5c13.3-13.3 13.3-35 0-48.3s-35-13.3-48.3 0L276.7 698V575.6c0-18.6-15-33.8-33.5-34.2-19.2-0.4-34.8 15.6-34.8 34.8v204.5c0 19.3 15.6 34.8 34.8 34.8h203.3c18.6 0 33.8-14.9 34.2-33.5 0.3-19.2-15.7-34.7-34.9-34.7z"
                  p-id="16317"
                  fill="#515151"
                ></path>
                <path
                  d="M821.3 155.3c26.2 0 47.4 21.3 47.4 47.4v618.5c0 26.2-21.3 47.4-47.4 47.4H202.7c-26.2 0-47.4-21.3-47.4-47.4V202.7c0-26.2 21.3-47.4 47.4-47.4h618.6m0-68.3H202.7c-15.6 0-30.7 3-45.1 9.1-13.8 5.8-26.2 14.1-36.8 24.8s-19 23-24.8 36.8c-6 14.3-9 29.5-9 45v618.5c0 15.6 3 30.7 9.1 45.1 5.8 13.8 14.1 26.2 24.8 36.8s23 19 36.8 24.8c14.3 6.1 29.5 9.1 45.1 9.1h618.5c15.6 0 30.7-3 45.1-9.1 13.8-5.8 26.2-14.1 36.8-24.8s19-23 24.8-36.8c6.1-14.3 9.1-29.5 9.1-45.1V202.7c0-15.6-3-30.7-9.1-45.1-5.8-13.8-14.1-26.2-24.8-36.8s-23-19-36.8-24.8c-14.4-6-29.6-9-45.1-9z"
                  p-id="16318"
                  fill="#515151"
                ></path>
              </svg>
            </button>
            <button class="tool button" n@click=${'git'}>
              <svg
                t="1629101473569"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="15307"
                width="64"
                height="64"
              >
                <path
                  d="M463.735467 82.397867l24.098133 24.1664-24.098133-24.1664zM82.397867 463.735467l-24.098134-24.1664 24.098134 24.1664z m0 96.529066l24.1664-24.098133-24.1664 24.098133z m381.3376 381.3376l-24.1664 24.098134 24.1664-24.098134z m96.529066 0l-24.098133-24.1664 24.098133 24.1664z m381.3376-381.3376l24.098134 24.1664-24.098134-24.1664z m0-96.529066l-24.1664 24.098133 24.1664-24.098133zM560.264533 82.397867l24.1664-24.098134-24.1664 24.098134zM439.637333 58.299733L58.299733 439.569067l48.264534 48.264533 381.269333-381.269333L439.637333 58.299733zM58.299733 584.362667l381.269334 381.269333 48.264533-48.264533-381.269333-381.269334-48.264534 48.264534z m526.1312 381.269333l381.269334-381.269333-48.264534-48.264534-381.269333 381.269334 48.264533 48.264533z m381.269334-526.1312L584.430933 58.299733l-48.264533 48.264534 381.269333 381.269333 48.264534-48.264533z m0 144.861867a102.4 102.4 0 0 0 0-144.861867l-48.264534 48.264533a34.133333 34.133333 0 0 1 0 48.3328l48.264534 48.264534zM439.637333 965.700267a102.4 102.4 0 0 0 144.861867 0l-48.264533-48.264534a34.133333 34.133333 0 0 1-48.3328 0l-48.264534 48.264534zM58.299733 439.637333a102.4 102.4 0 0 0 0 144.861867l48.264534-48.264533a34.133333 34.133333 0 0 1 0-48.3328L58.299733 439.637333z m429.533867-333.0048a34.133333 34.133333 0 0 1 48.3328 0L584.362667 58.299733a102.4 102.4 0 0 0-144.861867 0l48.264533 48.264534z m-136.533333 88.2688l68.266666 68.266667 48.3328-48.3328-68.266666-68.266667-48.3328 48.3328zM512 341.333333a34.133333 34.133333 0 0 1-34.133333-34.133333H409.6A102.4 102.4 0 0 0 512 409.6V341.333333z m34.133333-34.133333a34.133333 34.133333 0 0 1-34.133333 34.133333v68.266667A102.4 102.4 0 0 0 614.4 307.2H546.133333zM512 273.066667a34.133333 34.133333 0 0 1 34.133333 34.133333h68.266667A102.4 102.4 0 0 0 512 204.8v68.266667z m0-68.266667A102.4 102.4 0 0 0 409.6 307.2h68.266667a34.133333 34.133333 0 0 1 34.133333-34.133333V204.8z m44.100267 194.833067l102.4 102.4 48.264533-48.3328-102.4-102.4-48.264533 48.3328zM716.8 546.133333a34.133333 34.133333 0 0 1-34.133333-34.133333H614.4A102.4 102.4 0 0 0 716.8 614.4V546.133333z m34.133333-34.133333a34.133333 34.133333 0 0 1-34.133333 34.133333v68.266667A102.4 102.4 0 0 0 819.2 512h-68.266667z m-34.133333-34.133333a34.133333 34.133333 0 0 1 34.133333 34.133333h68.266667A102.4 102.4 0 0 0 716.8 409.6v68.266667z m0-68.266667A102.4 102.4 0 0 0 614.4 512h68.266667a34.133333 34.133333 0 0 1 34.133333-34.133333V409.6zM477.866667 375.466667v273.066666h68.266666v-273.066666H477.866667z m34.133333 375.466666a34.133333 34.133333 0 0 1-34.133333-34.133333H409.6A102.4 102.4 0 0 0 512 819.2v-68.266667z m34.133333-34.133333a34.133333 34.133333 0 0 1-34.133333 34.133333v68.266667A102.4 102.4 0 0 0 614.4 716.8H546.133333z m-34.133333-34.133333a34.133333 34.133333 0 0 1 34.133333 34.133333h68.266667A102.4 102.4 0 0 0 512 614.4v68.266667z m0-68.266667A102.4 102.4 0 0 0 409.6 716.8h68.266667a34.133333 34.133333 0 0 1 34.133333-34.133333V614.4z"
                  p-id="15308"
                  fill="#515151"
                ></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="article-part">
          <div class="writing">
            <textarea
              id="content"
              class="test"
              n@name="content"
              n@keyup=${copy}
            >
${data.text}</textarea
            >
          </div>
          <div class="showing" id="showcontent" n@name="showcontent"></div>
        </div>
      </div>
    </div>
  `
  /**
   * save html into data.convert
   */
  const proxyData = reactive(data, (p, data) => {
    switch (p) {
      case 'text':
      //   console.log(data.text)

      case 'convert':
        console.log(data.convert)
        doms.showcontent.innerHTML = marked(data.text)

      // case 'title':
      //   console.log(data.title)
    }
  })
  proxyData.text = data.text
  return { el }
}

export default WriteArticle

/**
 * Set cursor position function
 * @param ctrl
 * @param pos target location for cursor
 */
function setCaretPosition(ctrl: any, pos: number) {
  if (ctrl.setSelectionRange) {
    ctrl.focus()
    ctrl.setSelectionRange(pos, pos)
  } else if (ctrl.createTextRange) {
    var range = ctrl.createTextRange()
    /* Set to collapse, that is, the start and 
    end points of the cursor overlap each other */
    range.collapse(true)
    range.moveEnd('character', pos)
    range.moveStart('character', pos)
    range.select()
  }
}
